import { useState } from "react";

function Counter(props) {
    const [count, setCount] = useState(() => {
        return props.num ** 2;
    });

    return (
        <button onClick={() => setCount(count + 1)}>{count}</button>
    )
}

function App() {
    const [name, setName] = useState(() => {
        return '阿炜'
    });

    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#!method=get', true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            
            const res = JSON.parse(xhr.responseText);
            console.log(res.data);  
            setRes(res.data);
        }
    }
    
    const [res, setRes] = useState([]);
    

    return (
        <div>
            <h1>Hello {name}</h1>
            <Counter num={10} />

            <ul>
                {
                    res.map((item, index) => {
                        return <li>{item.name}</li>
                    })
                }
            </ul>
        </div>
    )
}
export default App;